<template>
    <div>
        <!-- header -->
        <el-col :span="24">
            <Greet />
        </el-col>
        <!-- 轮播图 -->
        <el-col :span="24" class="m-t-15">
            <el-carousel indicator-position="outside" :interval="3000" arrow="always">
                <el-carousel-item v-for="item in list" :key="item.id">
                    <div class="carousel-view" :style="`background-image: url(${item.url});`">
                        <div class="c-bg"></div>
                        <div class="tip">{{ item.str }}</div>
                    </div>
                </el-carousel-item>
            </el-carousel>
        </el-col>
        <div class="floor">Copyright &copy; 2023 水上急先锋</div>
    </div>
</template>

<script>
import Greet from './Greet.vue'
export default {
    name: 'Home',
    components: { Greet },
    data() {
        return {
            list: [
                {
                    id: 1,
                    url: require("@/assets/login-backgroud/morning.jpg"),
                    str: "无人船巡航控制，GPS-RTK模式高精度的厘米级定位。",
                },
                {
                    id: 2,

                    url: require("@/assets/login-backgroud/afternoon.jpg"),
                    str: "全自动取样装置，全天候水质检测，数据预警提醒。",
                },
                {
                    id: 3,
                    url: require("@/assets/login-backgroud/evening.jpg"),
                    str: "无人船与水质检测无线传感网络静动协同设计。",
                },
            ]
        }
    }
}
</script>
<style scoped>
.greet-view {
    height: 210px;
    font-size: 40px;
    text-align: center;
}

.carousel-view {
    position: relative;
    height: 100%;
    padding: 30px;
    background-position: center center;
    background-repeat: no-repeat;

    .tip {
        position: absolute;
        z-index: 99;
        bottom: 30px;
        left: 30px;
        text-align: right;
        font-size: 20px;
        color: #fff;
    }

    .c-bg {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(30, 30, 30, 0.35);
    }
}

.floor {
    text-align: right;
}
</style>